<template>
  <div class="box">
    <h1>组件间通信2: vue自定义事件</h1>

    <h2>原生事件监听</h2>
    
    <button @click="btnclick">原生标签原生DOM事件监听</button>
    <button @click="btnClick">原生标签原生DOM事件监听33332</button>

    <h2>自定义事件监听原生事件</h2>
    <Event1 @click.native="aventBtn" />
    <br />
    <br />
    <h2>count当前值为:{{count}}</h2>
    <Event2 @click="test1" @minus="test2" ref='event2'/>
  </div>
</template>

<script type="text/ecmascript-6">
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

export default {
  name: "EventTest",

  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btnclick(e) {
      alert(e.target.innerHTML);
    },
    btnClick(e) {
      alert(e.target.innerHTML);
    },
    aventBtn(e) {
      alert(e.target.tagName);
    },
    test1(num) {
      this.count += num
    },
    test2(num) {
      this.count -= num
    },
    test3(num){
      this.count *= num
    }
  },
  mounted() {
    this.$refs.event2.$on('ride',this.test3)
  },
  components: {
    Event1,
    Event2,
  },
};
</script>
